<template>
    <div>
        <div class="box">
            <div class="boxtop">
                <backcon></backcon>
                <p>{{arr.trySeeTitle}}</p>
            </div>
            <video autoplay controls>
                <source :src="video" type="video/mp4"> 
            </video>
            <p class="title">{{arr.title}}</p>
            <hr>
            <div v-for="(v,i) in introduces" :key="i" class="content">
                <p class="content-title">【{{v.title}}】</p>
                <div v-html="v.introduce" class="part">{{v.introduce}}</div>
            </div>
            <!-- <img :src="arr.image" alt="" class="pic1"> -->
        </div>
    </div>
</template>
<script>
 import axios from "axios"
 import backcon from '../backcon.vue'
export default {
    components:{backcon},
    data() {
        return {
           courseId:0,
           arr:[],
           video:'',
           introduces:[]
        }
    },
   activated:function(){
    this.getParams();
    this.getallinfo();
    },
    watch: { // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
     '$route': 'getParams'

    },
    methods:{
        getParams:function(){
            // 取到路由带过来的参数
            var routerParams= this.$route.query.courseId;
            // 将数据放在当前组件的数据内
            this.courseId = routerParams
            window.console.log(this.courseId)
        },

        getallinfo:function(){
            new Promise((resolve)=>{
            axios.get('https://api.hongbeibang.com/education/getCourse?_t=1582179443400&csrfToken=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOjAsImV4cCI6MTc3MTU2NjMxNCwiaWF0IjoxNTgyMTc3NTE0fQ.iBmGtQ0fasTTaSuApywmN6Ms0aNYwUvkGLoXX6V6hO8', {
            params: {
               educationCourseId:this.courseId
            }})
            .then(res=>{
                resolve(res);
                 this.arr=res.data.data
                this.video=res.data.data.playURL2
                window.console.log(this.arr)
                //window.console.log(this.video)
                //window.console.log(this.arr.introduces)
                this.introduces=this.arr.introduces.slice(0,2)

            })
            })
        },
        back(){
            this.$router.go(-1);//返回上一层
        }
        
    },
}
</script>
<style scoped>
.box{width: 90%;margin: .2rem auto}
.boxtop{display: flex;align-items: center}
.boxtop p{width: 100%;text-align: center;font-weight: bold;font-size: .2rem}
.toptitle{display: flex;align-items: center;padding: .08rem}
.toptitle p{text-align: center;margin-left: .05rem;width: 100%}
.toptitle img{width: .3rem}
    video{width: 100%}
    .title{font-size: .2rem;font-weight: bold;padding: .08rem}
    .pic1{width: 100%}
    .part{margin-top: 10px}
    .part{background-color:#FCEBF3;padding: 0.08rem;}
    .content-title{margin: .05rem;font-weight: bold}
</style>